<!DOCTYPE html>
<html>
<head>
    <title>Calendar</title>
    <link type="text/css" rel="stylesheet" href="../base/css/style.css">
    <link type="text/css" rel="stylesheet" href="Calendar.css">
</head>
<body>
<h1>Calendar</h1>
<label>开始日期<input id="cal1" type="text"></label>
<label>结束日期<input id="cal2" type="text"></label>
<!--
<table class="ui-calendar-year" data-role="year-column">
    <tbody>
    <tr class="ui-calendar-year-column">
        <td data-role="previous-10-year" data-value="2009">. . .</td>
        <td data-role="year" data-value="2010">2010</td>
        <td data-role="year" data-value="2011">2011</td>
    </tr>
    <tr class="ui-calendar-year-column">
        <td data-role="year" data-value="2011">2011</td>
        <td data-role="year" data-value="2013" class="focused-element">2013</td>
        <td data-role="year" data-value="2014">2014</td>
    </tr>
    <tr class="ui-calendar-year-column">
        <td data-role="year" data-value="2015">2015</td>
        <td data-role="year" data-value="2016">2016</td>
        <td data-role="year" data-value="2017">2017</td>
    </tr>
    <tr class="ui-calendar-year-column">
        <td data-role="year" data-value="2018">2018</td>
        <td data-role="year" data-value="2019">2019</td>
        <td data-role="next-10-year" data-value="2020">. . .</td>
    </tr>
    </tbody>
</table>
-->
<!--
<table class="ui-calendar-month" data-role="month-column" data-widget-cid="widget-2">
    <tbody>
    <tr class="ui-calendar-month-column" data-year="2013">
        <td data-role="month" data-value="0">Jan</td>
        <td data-role="month" data-value="1">Feb</td>
        <td data-role="month" data-value="2">Mar</td>
    </tr>
    <tr class="ui-calendar-month-column" data-year="2013">
        <td data-role="month" data-value="3">Apr</td>
        <td data-role="month" data-value="4">May</td>
        <td data-role="month" data-value="5">Jun</td>
    </tr>
    <tr class="ui-calendar-month-column" data-year="2013">
        <td data-role="month" data-value="6">Jul</td>
        <td data-role="month" data-value="7">Aug</td>
        <td data-role="month" data-value="8">Sep</td>
    </tr>
    <tr class="ui-calendar-month-column" data-year="2013">
        <td data-role="month" data-value="9">Oct</td>
        <td data-role="month" data-value="10">Nov</td>
        <td data-role="month" data-value="11" class="focused-element">Dec</td>
    </tr>
    </tbody>
</table>
-->
<!--
<table class="ui-calendar-date" data-role="date-column" data-widget-cid="widget-4" style="display: table;">
    <tbody>
    <tr class="ui-calendar-day-column">
        <th class="ui-calendar-day ui-calendar-day-0" data-role="day" data-value="0">日</th>
        <th class="ui-calendar-day ui-calendar-day-1" data-role="day" data-value="1">一</th>
        <th class="ui-calendar-day ui-calendar-day-2" data-role="day" data-value="2">二</th>
        <th class="ui-calendar-day ui-calendar-day-3" data-role="day" data-value="3">三</th>
        <th class="ui-calendar-day ui-calendar-day-4" data-role="day" data-value="4">四</th>
        <th class="ui-calendar-day ui-calendar-day-5" data-role="day" data-value="5">五</th>
        <th class="ui-calendar-day ui-calendar-day-6" data-role="day" data-value="6">六</th>
    </tr>
    <tr class="ui-calendar-date-column">
        <td class="ui-calendar-day-0 previous-month" data-role="date" data-value="2014-02-23">23</td>
        <td class="ui-calendar-day-1 previous-month" data-role="date" data-value="2014-02-24">24</td>
        <td class="ui-calendar-day-2 previous-month" data-role="date" data-value="2014-02-25">25</td>
        <td class="ui-calendar-day-3 previous-month" data-role="date" data-value="2014-02-26">26</td>
        <td class="ui-calendar-day-4 previous-month" data-role="date" data-value="2014-02-27">27</td>
        <td class="ui-calendar-day-5 previous-month" data-role="date" data-value="2014-02-28">28</td>
        <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2014-03-01">1</td>
    </tr>
    <tr class="ui-calendar-date-column">
        <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2014-03-02">2</td>
        <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2014-03-03">3</td>
        <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2014-03-04">4</td>
        <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2014-03-05">5</td>
        <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2014-03-06">6</td>
        <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2014-03-07">7</td>
        <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2014-03-08">8</td>
    </tr>
    <tr class="ui-calendar-date-column">
        <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2014-03-09">9</td>
        <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2014-03-10">10</td>
        <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2014-03-11">11</td>
        <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2014-03-12">12</td>
        <td class="ui-calendar-day-4 current-month focused-element" data-role="date" data-value="2014-03-13">13</td>
        <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2014-03-14">14</td>
        <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2014-03-15">15</td>
    </tr>
    <tr class="ui-calendar-date-column">
        <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2014-03-16">16</td>
        <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2014-03-17">17</td>
        <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2014-03-18">18</td>
        <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2014-03-19">19</td>
        <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2014-03-20">20</td>
        <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2014-03-21">21</td>
        <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2014-03-22">22</td>
    </tr>
    <tr class="ui-calendar-date-column">
        <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2014-03-23">23</td>
        <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2014-03-24">24</td>
        <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2014-03-25">25</td>
        <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2014-03-26">26</td>
        <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2014-03-27">27</td>
        <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2014-03-28">28</td>
        <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2014-03-29">29</td>
    </tr>
    <tr class="ui-calendar-date-column">
        <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2014-03-30">30</td>
        <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2014-03-31">31</td>
        <td class="ui-calendar-day-2 next-month" data-role="date" data-value="2014-04-01">1</td>
        <td class="ui-calendar-day-3 next-month" data-role="date" data-value="2014-04-02">2</td>
        <td class="ui-calendar-day-4 next-month" data-role="date" data-value="2014-04-03">3</td>
        <td class="ui-calendar-day-5 next-month" data-role="date" data-value="2014-04-04">4</td>
        <td class="ui-calendar-day-6 next-month" data-role="date" data-value="2014-04-05">5</td>
    </tr>
    </tbody>
</table>
-->
<!--
<div class="ui-calendar">
    <div class="ui-calendar-pannel" data-role="pannel">
        <span class="ui-calendar-control" data-role="prev-year">&lt;&lt;</span>
        <span class="ui-calendar-control" data-role="prev-month">&lt;</span>
        <span class="ui-calendar-control month" data-role="current-month">十月</span>
        <span class="ui-calendar-control year" data-role="current-year">2013</span>
        <span class="ui-calendar-control" data-role="next-month">&gt;</span>
        <span class="ui-calendar-control" data-role="next-year">&gt;&gt;</span>
    </div>
    <div class="ui-calendar-container" data-role="container">
    </div>
</div>
-->
<!--
<div class="ui-calendar">
    <div class="ui-calendar-pannel" data-role="pannel">
        <span class="ui-calendar-control" data-role="prev-year">&lt;&lt;</span>
        <span class="ui-calendar-control" data-role="prev-month">&lt;</span>
        <span class="ui-calendar-control month" data-role="current-month">十月</span>
        <span class="ui-calendar-control year" data-role="current-year">2013</span>
        <span class="ui-calendar-control" data-role="next-month">&gt;</span>
        <span class="ui-calendar-control" data-role="next-year">&gt;&gt;</span>
    </div>
    <div class="ui-calendar-container" data-role="container">
        <table class="ui-calendar-date" data-role="date-column" data-widget-cid="widget-48" style="display: table;">
            <tbody>
            <tr class="ui-calendar-day-column">
                <th class="ui-calendar-day ui-calendar-day-0" data-role="day" data-value="0">日</th>
                <th class="ui-calendar-day ui-calendar-day-1" data-role="day" data-value="1">一</th>
                <th class="ui-calendar-day ui-calendar-day-2" data-role="day" data-value="2">二</th>
                <th class="ui-calendar-day ui-calendar-day-3" data-role="day" data-value="3">三</th>
                <th class="ui-calendar-day ui-calendar-day-4" data-role="day" data-value="4">四</th>
                <th class="ui-calendar-day ui-calendar-day-5" data-role="day" data-value="5">五</th>
                <th class="ui-calendar-day ui-calendar-day-6" data-role="day" data-value="6">六</th>
            </tr>
            <tr class="ui-calendar-date-column">
                <td class="ui-calendar-day-0 previous-month" data-role="date" data-value="2013-09-29">29</td>
                <td class="ui-calendar-day-1 previous-month" data-role="date" data-value="2013-09-30">30</td>
                <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2013-10-01">1</td>
                <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2013-10-02">2</td>
                <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2013-10-03">3</td>
                <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2013-10-04">4</td>
                <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2013-10-05">5</td>
            </tr>
            <tr class="ui-calendar-date-column">
                <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2013-10-06">6</td>
                <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2013-10-07">7</td>
                <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2013-10-08">8</td>
                <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2013-10-09">9</td>
                <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2013-10-10">10</td>
                <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2013-10-11">11</td>
                <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2013-10-12">12</td>
            </tr>
            <tr class="ui-calendar-date-column">
                <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2013-10-13">13</td>
                <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2013-10-14">14</td>
                <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2013-10-15">15</td>
                <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2013-10-16">16</td>
                <td class="ui-calendar-day-4 current-month focused-element" data-role="date" data-value="2013-10-17">
                    17
                </td>
                <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2013-10-18">18</td>
                <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2013-10-19">19</td>
            </tr>
            <tr class="ui-calendar-date-column">
                <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2013-10-20">20</td>
                <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2013-10-21">21</td>
                <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2013-10-22">22</td>
                <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2013-10-23">23</td>
                <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2013-10-24">24</td>
                <td class="ui-calendar-day-5 current-month" data-role="date" data-value="2013-10-25">25</td>
                <td class="ui-calendar-day-6 current-month" data-role="date" data-value="2013-10-26">26</td>
            </tr>
            <tr class="ui-calendar-date-column">
                <td class="ui-calendar-day-0 current-month" data-role="date" data-value="2013-10-27">27</td>
                <td class="ui-calendar-day-1 current-month" data-role="date" data-value="2013-10-28">28</td>
                <td class="ui-calendar-day-2 current-month" data-role="date" data-value="2013-10-29">29</td>
                <td class="ui-calendar-day-3 current-month" data-role="date" data-value="2013-10-30">30</td>
                <td class="ui-calendar-day-4 current-month" data-role="date" data-value="2013-10-31">31</td>
                <td class="ui-calendar-day-5 next-month" data-role="date" data-value="2013-11-01">1</td>
                <td class="ui-calendar-day-6 next-month" data-role="date" data-value="2013-11-02">2</td>
            </tr>
            </tbody>
        </table>
        <table class="ui-calendar-month" data-role="month-column" data-widget-cid="widget-49" style="display: none;">
            <tbody>
            <tr class="ui-calendar-month-column" data-year="2013">
                <td data-role="month" data-value="0">一月</td>
                <td data-role="month" data-value="1">二月</td>
                <td data-role="month" data-value="2">三月</td>
            </tr>
            <tr class="ui-calendar-month-column" data-year="2013">
                <td data-role="month" data-value="3">四月</td>
                <td data-role="month" data-value="4">五月</td>
                <td data-role="month" data-value="5">六月</td>
            </tr>
            <tr class="ui-calendar-month-column" data-year="2013">
                <td data-role="month" data-value="6">七月</td>
                <td data-role="month" data-value="7">八月</td>
                <td data-role="month" data-value="8">九月</td>
            </tr>
            <tr class="ui-calendar-month-column" data-year="2013">
                <td data-role="month" data-value="9" class="focused-element">十月</td>
                <td data-role="month" data-value="10">十一月</td>
                <td data-role="month" data-value="11">十二月</td>
            </tr>
            </tbody>
        </table>
        <table class="ui-calendar-year" data-role="year-column" data-widget-cid="widget-50" style="display: none;">
            <tbody>
            <tr class="ui-calendar-year-column">
                <td data-role="previous-10-year" data-value="2003">. . .</td>
                <td data-role="year" data-value="2007">2007</td>
                <td data-role="year" data-value="2008">2008</td>
            </tr>
            <tr class="ui-calendar-year-column">
                <td data-role="year" data-value="2009">2009</td>
                <td data-role="year" data-value="2010">2010</td>
                <td data-role="year" data-value="2011">2011</td>
            </tr>
            <tr class="ui-calendar-year-column">
                <td data-role="year" data-value="2012">2012</td>
                <td data-role="year" data-value="2013" class="focused-element">2013</td>
                <td data-role="year" data-value="2014">2014</td>
            </tr>
            <tr class="ui-calendar-year-column">
                <td data-role="year" data-value="2015">2015</td>
                <td data-role="year" data-value="2016">2016</td>
                <td data-role="next-10-year" data-value="2023">. . .</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
-->
<div id="test" class="focused-element disabled-element"></div>
<div id="test2" class="focused-element disabled-element"></div>
<div id="test3" class="focused-element disabled-element"></div>
<script type="text/javascript" src="../base/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Calendar.js"></script>
<script type="text/javascript">
    //使用Calendar
    /*
     var yearColumn = new SA.Calendar.YearColumn({focus: 2015, range: [2012, 2023]});
     var monthColumn = new SA.Calendar.MonthColumn({focus: 9});
     var dateColumn = new SA.Calendar.DateColumn({focus: new Date(2013, 9, 12), range: ["2013-10-12", "2013-11-12"]});
     $("#test").append(yearColumn.elem);
     $("#test2").append(monthColumn.elem);
     $("#test3").append(dateColumn.elem);*/
    var column1 = new SA.Calendar({trigger: $("#cal1")});//, maxDate: "2014-1-12", minDate: new Date()
    var column2 = new SA.Calendar({trigger: $("#cal2")});//, maxDate: "2014-1-12", minDate: new Date()
    column1.onChange = function (date) {
        column2.setRange(date, column2.maxDate);
    };
    column2.onChange = function (date) {
        column1.setRange(column2.minDate, date);
    };
</script>
</body>
</html>